<template>
  <div class="view-detail" v-if="productInfo">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item,index) in productInfo.imgs" :key="index">
        <img v-lazy="item" />
      </van-swipe-item>
    </van-swipe>
    <div class="product-info">
      <div class="row-wrapper">
        <div class="name">{{productInfo.title}}</div>
        <div class="point">
          <span>500</span>
          <img
            src=""
            class="icon-point"
          />
        </div>
      </div>

      <div class="description">{{productInfo.description}}</div>
    </div>
    <div class="product-publisher" v-if="productInfo.user">
      <img class="user-avatar" :src="productInfo.user.avatar" />
      <div class="user-info">
        <div class="user-nickname">{{productInfo.user.nickname}}</div>
        <div class="user-area">{{productInfo.user.residence}}</div>
      </div>
    </div>
    <MessageBoard
      ref="messageBoard"
      :id="itemId"
      :showTalkBox="showTalkBox"
      :content="message"
      @showBox="leaveMessage"
      :parentId="parentId"
      @getPId="getParentId"
    />
    <div class="footer-bar">
      <div class="icon-wrapper">
        <div class="like" :class="{highLight:like}">
          <van-icon name="good-job-o" @click="tapLike(2)" />喜欢
        </div>
        <div class="collect" :class="{highLight:collect}">
          <van-icon name="star-o" @click="tapLike(1)" />收藏
        </div>
        <div class="message">
          <van-icon name="more-o" @click="leaveMessage" />留言
        </div>
      </div>
      <div class="want">我想要</div>
    </div>
    <van-popup v-model="showTalkBox" position="bottom">
      <div class="message-wrapper">
        <div class="input-wrapper">
          <van-field ref="messageInput" v-model="message" />
        </div>
        <van-button type="primary" @click="submitComment">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import { Icon, Popup, Field, Button } from "vant";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe)
  .use(SwipeItem)
  .use(Popup)
  .use(Field)
  .use(Button);
Vue.use(Icon);
import MessageBoard from "@/components/message-board.vue";
import xzProductApi from "@/api/xzProduct";
import likeApi from "@/api/like";
import commentApi from "@/api/comment";

export default {
  data() {
    return {
      productInfo: null,
      itemId: 0,
      like: false,
      collect: false,
      showTalkBox: false,
      message: "",
      likeId: 0,
      collectId: 0,
      parentId: null
    };
  },
  methods: {
    //获取商品信息
    getProductInfo(id) {
      xzProductApi.getProductInfo(id).then(res => {
        if (res) {
          this.productInfo = res;
        }
      });
    },
    //获取点赞/收藏 信息
    getLikeInfo(itemId, typeId) {
      likeApi.getLCInfo(itemId, typeId).then(res => {
        if (res.status) {
          if (typeId === 2) {
            this.like = true;
            this.likeId = res.id;
          } else {
            this.collect = true;
            this.collectId = res.id;
          }
        }
      });
    },
    //初始化数据
    initData(id) {
      this.getProductInfo(id);
      this.getLikeInfo(id, 2); //获取点赞
      this.getLikeInfo(id, 1); //获取收藏
    },
    //清除数据
    clearData() {
      this.productInfo = null;
      this.itemId = 0;
      this.collect = false;
      this.like = false;
      this.likeId = 0;
      this.collectId = 0;
    },
    //点赞/取消点赞
    tapLike(typeId) {
      if (typeId === 2) {
        if (!this.like) {
          likeApi.postLCInfo(this.itemId, typeId, 1).then(() => {
            this.getLikeInfo(this.itemId, typeId);
          });
        } else {
          likeApi.deleteLCInfo(this.likeId).then(() => {
            this.likeId = 0;
            this.getLikeInfo(this.itemId, typeId);
          });
        }
        this.like = !this.like;
      } else {
        if (!this.collect) {
          likeApi.postLCInfo(this.itemId, typeId, 2).then(() => {
            this.getLikeInfo(this.itemId, typeId);
          });
        } else {
          likeApi.deleteLCInfo(this.collectId).then(() => {
            this.collectId = 0;
            this.getLikeInfo(this.itemId, typeId);
          });
          this.collect = !this.collect;
        }
      }
    },
    //留言
    leaveMessage() {
      this.showTalkBox = true;
      this.message = "";
      this.$nextTick(() => {
        this.$refs.messageInput.focus();
      });
    },
    //提交评论
    submitComment() {
      if (this.parentId === null) {
        //对商品进行评论 typeId为1
        let [itemId, typeId, content, parentId] = [
          this.itemId,
          1,
          this.message,
          null
        ];
        commentApi
          .postCommentInfo(itemId, typeId, content, parentId)
          .then(() => {
            this.$refs.messageBoard.getCommentInfo(this.itemId, 1);
            this.showTalkBox = false;
          });
      } else {
        let [itemId, typeId, content, parentId, talkTo] = [
          undefined,
          2,
          this.message,
          this.parentId,
          2
        ];
        commentApi
          .postCommentInfo(itemId, typeId, content, parentId, talkTo)
          .then(() => {
            this.$refs.messageBoard.getCommentInfo(this.itemId, 1);
            this.showTalkBox = false;
            this.parentId = null;
          });
      }
    },
    getParentId(id) {
      this.parentId = id;
    }
  },
  components: {
    MessageBoard
  },
  mounted() {
    this.itemId = this.$route.params.id;
    this.initData(this.itemId);
  },
  deactivated() {
    this.clearData();
  }
};
</script>
<style lang="less" scoped>
.van-swipe {
  img {
    width: 100%;
    height: 250px;
  }
}

.product-info {
  background-color: #ffffff;
  color: #999;
  padding: 5px 10px;
  position: relative;

  .row-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      color: #333;
      font-weight: 700;
      text-align: left;
    }

    .point {
      display: flex;
      align-items: center;

      span {
        color: #ff5722;
        font-weight: 700;
        font-size: 20px;
        margin-right: 5px;
      }

      img {
        height: 20px;
        width: 20px;
      }
    }
  }

  .description {
    text-align: left;
  }
}

.product-publisher {
  background-color: #fff;
  color: #999;
  display: flex;
  margin-top: 10px;
  padding: 5px 10px;
  align-items: center;

  .user-avatar {
    width: 50px;
    height: 50px;
    margin-right: 5px;
  }

  .user-info {
    text-align: left;

    .user-nickname {
      color: #333333;
    }
  }
}

.footer-bar {
  background-color: #fff;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  box-sizing: border-box;

  .icon-wrapper {
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    div {
      float: left;
      margin-right: 10px;
    }
  }

  .want {
    float: right;
    background-color: #ff0000;
    color: #fff;
    padding: 5px;
    font-size: 12px;
  }
}

.highLight {
  color: #ff0000;
}

.message-wrapper {
  display: flex;

  .input-wrapper {
    flex: 1;
  }
}
</style>
